<template>
  <div class="app-main-container">
    <div class="app-main-title">排课
      <div class="goback" @click="$router.go(-1)">
        <i class="el-icon-refresh-left" /> 返回上一页
      </div>
    </div>
    <el-form
      ref="ruleForm"
      class="doumee-form"
      :model="param"
      :rules="rules"
      label-width="120px"
      label-suffix="："
    >
      <el-form-item label="课程名称">
        <el-input
          v-model="param.nickName"
          type="text"
          placeholder="请输入课程名称"
          disabled
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="课程类目">
        <el-input
          v-model="param.lm"
          type="text"
          placeholder="请输入课程类目"
          disabled
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="课时数" prop="classNum">
        <el-input
          v-model="param.classNum"
          type="number"
          placeholder="请输入课时数"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="上课教练" prop="teacherId">
        <el-select v-model="param.teacherId" placeholder="请选择上课教练">
          <el-option
            v-for="item in jlList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上课日期" prop="classDay">
        <el-date-picker
          v-model="param.classDay"
          :picker-options="pickerOptions"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="上课时间" prop="time">
        <el-time-picker
          v-model="param.time"
          is-range
          value-format="HH:mm"
          format="HH:mm"
          :clearable="false"
          range-separator="至"
          style="width: 300px"
          start-placeholder="开始时刻"
          end-placeholder="结束时刻"
        />
      </el-form-item>
      <el-form-item label="上课地点" prop="siteType">
        <el-radio-group v-model="param.siteType ">
          <el-radio :label="1">自定义</el-radio>
          <el-radio :label="2">选择场次</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="param.siteType == 1" prop="site">
        <el-input
          v-model="param.site"
          type="text"
          placeholder="请输入上课地点"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item v-if="param.siteType == 2" prop="dd">
        <el-col :span="6">
          <el-select
            v-model="param.dd[0]"
            placeholder="请选择场区"
            style="width: 100%"
            @change="getSpaceList(param.dd[0])"
          >
            <el-option
              v-for="item in cqList"
              :key="item.id"
              :label="item.areaName"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col class="line" :span="1" style="text-align: center">-</el-col>
        <el-col :span="6">
          <el-select
            v-model="param.dd[1]"
            placeholder="请选择场地"
            style="width: 100%"
          >
            <el-option
              v-for="item in cdList"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          @click="onSubmit()"
        >提交</el-button>
      </el-form-item></el-form>
  </div>
</template>

<script>
import { uploadFile, getAreaList, spaceList } from '@/api'
export default {
  name: 'ScheduleCardAdd',
  data() {
    var newRule = (rule, value, callback) => {
      console.log(value[0], 7, value[1])
      if (!value[0]) {
        callback(new Error(rule.message || '请选择场区'))
      } else if (!value[1]) {
        callback(new Error(rule.message || '请选择场地'))
      } else {
        callback()
      }
    }
    var newRuleb = (rule, value, callback) => {
      // console.log(value[0], 7, value[1])
      if (value[0] === undefined && value[1] === undefined) {
        callback(new Error(rule.message || '请输入课程人数范围'))
      } else if (!/^\+?[1-9][0-9]*$/.test(value[0]) || !/^\+?[1-9][0-9]*$/.test(value[1])) {
        callback(new Error(rule.message || '请输入正确人数'))
      } else if (value[0] < 1) {
        callback(new Error(rule.message || '请输入正确人数范围'))
      } else if (Number(value[0]) > Number(value[1])) {
        callback(new Error(rule.message || '请输入正确人数范围'))
      } else {
        callback()
      }
    }
    return {
      uploadFileUrl: uploadFile,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
        }
      },
      uploadData: {
        folder: 'VENUE_IMG',
        type: ''
      },
      jlList: [],
      venueId: sessionStorage.getItem('venueId'),
      param: {
        venueId: sessionStorage.getItem('venueId'),
        rs: [],
        dd: []
      },
      rules: {
        classNum: [{ pattern: /^\+?[1-9][0-9]*$/, required: true, message: '请输入正确课时数', trigger: 'blur' }],
        site: [{ required: true, message: '请输入上课地点', trigger: 'blur' }],
        dd: [{ required: true, validator: newRule, trigger: ['change', 'change'] }],
        teacherId: [{ required: true, message: '请选择授课教练', trigger: 'change' }],
        classDay: [{ required: true, message: '请选择上课日期', trigger: 'change' }],
        time: [{ required: true, message: '请选择上课时间', trigger: 'change' }],
        siteType: [{ required: true, message: '请选择上课地点类型', trigger: 'change' }],
        rs: [{ required: true, validator: newRuleb, trigger: ['change', 'change'] }]
      },
      cqList: [],
      cdList: []
    }
  },
  created() {
    // this.firstQueryTime = this.setTempDate()
    this.toGetAreaList()
  },
  methods: {
    toGetAreaList() {
      const venueId = this.venueId
      getAreaList({ param: { venueId }})
        .then(res => {
          this.cqList = res.recordList
        })
    },
    getSpaceList(id) {
      this.$set(this.param, 'dd', [id, ''])
      spaceList({ param: { id }})
        .then(res => {
          this.cdList = res.recordList
        })
    },
    onSubmit() {
      // console.log(122, this.param)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(122, this.param)
        } else {
          console.log('error submit!!')
          return false
        }
      })

      // if (!this.param.nickName) {
      //   this.$message.error('请输入昵称')
      //   return
      // }
      // if (this.param.phone.length < 11) {
      //   this.$message.error('请输入正确手机号')
      //   return
      // }
      // if (!this.param.vcode) {
      //   this.$message.error('请输入验证码')
      //   return
      // }
      // if (!this.pwd) {
      //   this.$message.error('请输入交易码')
      //   return
      // }
      // if (!this.enSurePwd) {
      //   this.$message.error('请确认交易码')
      //   return
      // }
      // if (this.enSurePwd.length !== 6 || this.pwd.length !== 6) {
      //   this.$message.error('密码')
      //   return
      // }
      // if (this.enSurePwd !== this.pwd) {
      //   this.$message.error('两次交易码不一样')
      //   return
      // }
      // this.param.payPw = this.pwd
      // console.log('111')
      // if (this.vipType >= this.vipTypes.length) {
      //   this.$message.error('卡类型错误')
      //   return
      // }
      // console.log('111')
      // this.param.cardTypeId = this.vipTypes[this.vipType].id
      // memberAdd({
      //   param: this.param
      // }).then(res => {
      //   if (res.errorCode === '000000') {
      //     // this.$router.go(-1)
      //     // this.dialogTableVisible = true
      //     this.getOrderMessage(res.record)
      //   }
      // }).catch(err => {
      //   console.log(err)
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 20px;
}
.device-uploaders {
  ::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
  ::v-deep .el-upload {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}
</style>
